body {
	margin: 0;
	width: 1350px;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

/* 
			*{
				margin: 0;
				padding: 0;
			} 
			*/

#banner {
	position: relative; //相对定位
	width: 100%;
	height: 316px;
	margin: 0 100px 0;

}


.nav {
	width: 216px;
	height: 316px;
	background: rgba(0, 0, 0, .6);
}

.nav_item {
	color: white;
}

.nav_item:hover {
	color: black;
	background-color: #ffbe00;
}

.nav-list {
	position: relative;
	width: 216px;
	height: 276px;
	padding: 20px 0;
}

.nav-item-first {
	width: 100%;
	height: 55.2px;
}

.nav-item-first:hover .show-wrap {
	display: block;
}

.first-link {
	display: block;
	width: 100%;
	height: 55.2px;
	color: #fff;
	font-size: 16px;
	line-height: 55.2px;
	text-indent: 30px;
	/* 首行缩进 */
}

.first-link:hover {
	background: rgb(107, 113, 118);
}

.show-wrap {
	display: none;
	position: absolute;
	top: 0;
	left: 216px;
	height: 316px;
	width: 500px;
	background: rgba(170, 170, 170, .95);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
	z-index: 10;

}

.small-title span {
	position: absolute;
	top: 20px;
	left: 20px;
	color: red;
	font-size: 18px;
}

.nav .tag-box {
	position: absolute;
	top: 60px;
	left: 20px;
}

.nav .tag-box .tag-box-a {
	text-align: center;
	width: 80px;
	height: 20px;
	line-height: 20px;
	display: inline-block;
	margin: 6px 30px;
}



#banner .item {
	width: 936px;
	height=316px;
	display: none;
	position: absolute; //绝对定位 脱离文档流
	top: 100px;
	right: 0;
}

.img-wrap {
	width: 936px;
	height: 316px;
	position: absolute;
	top: 0;
	left: 216px;
	z-index: -1;
}

.lr-tab .btn {
	position: absolute;
	top: 128px;
	width: 41px;
	height: 69px;
	background: url(../img/icon-slides.png);
}

.lr-tab .left {
	left: 216px;
	background-position-x: 83px;
}

.lr-tab .left:hover {
	background-position-x: 0px;
}

.lr-tab .right {
	right: -3px;
	background-position-x: 42px;
}

.lr-tab .right:hover {
	background-position-x: 123px;
}

.tab-btn {
	position: absolute;
	width: 120px;
	height: 30px;
	right: 30px;
	bottom: 16px;
}

.tab-btn .btn {
	float: left;
	width: 6px;
	height: 6px;
	border: 2px solid rgb(7, 17, 27, .8);
	background: rgb(7, 17, 27, .8);
	border-radius: 50%;
	margin-left: 16px;
	margin-top: 8px;
}

.tab-btn .btn:hover {
	background: #fff;
	border: 2px solid rgba(7, 17, 27, .4);
}

.tab-btn .active {
	background: #fff;
	border: 2px solid rgba(7, 17, 27, .4);
}

.course-box {
	margin: 20px 100px 10px;
	box-shadow: 0 8px 16px 0 rgba(28, 31, 33, .1);
}

.course-box p {
	font-family: "微软雅黑";
	font-size: 22px;
	text-align: center;
}

.course-box .box {
	position: relative;
	margin: 20px 3px 10px;
	width: 220px;
	height: 200px;
	display: inline-block;
	/* background-color: grey; */
}

.course-box .box img {
	border-radius: 8px;
}

.course-box .box span {
	margin: 2px 9px;
	/*  
		CSS实现2行溢出显示省略号
		此法仅适用于WebKit浏览器及移动端 
	*/
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.course-box .box .label-style {
	position: absolute;
	top: 90px;
	left: 9px;
	color: #FFFFFF;
}

.course-box .box .course-stat {
	position: absolute;
	border: 2px solid #FFFFFF;
	border-radius: 12px;
	top: 8px;
	left: -8px;
	z-index: 8;
	font-family: 'dincondm';
	font-size: 12px;
	color: #FFFFFF;
	line-height: 20px;
	padding: 0 8px;
	background-color: #9447EB;
	background-image: linear-gradient(90deg, #bd89f8 6%, #9447eb 93%); /* 线性渐变 */
}

.course-box .box .tuijian {
	background-color: red;
	background-image: linear-gradient(90deg, #ec6f6f 6%, #eb4747 93%);
}

.course-box .box .label-style label {
	font-size: 12px;
	padding: 4px 8px;
	background: rgba(7, 17, 27, 0.4);
	border-radius: 12px;
	font-weight: 200;
	/* 设置文本的粗细 */
}

.course-box .box .span-sty {
	color: #93999F;
	font-size: 12px;
	display: inline-block;
}

#callme-div{
	display: none;
}

.course-box .box .star {
	color: rgb(255, 130, 0);
	font-size: 13px;
}

.footer {
	position: relative;
	padding-top: 20px;
	text-align: center;
	background-color: rgb(239, 241, 243);

}

.footer p {
	font-size: 15px;
	margin: 5px auto;
}

.footer a {
	color: #99a1a6;
	margin-left: 30px;
}

.footer a:hover {
	color: #1c1f21;
}

.footer .callme {
	position: absolute;
	top: -85px;
	left: 488px;
}
